<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>03_自定义滚动条-页面搭建</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            /* 禁用系统滚动条 */
            html,body {
                height: 100%;
                overflow: hidden;
            }

            /* 模拟body */
            .wrapper {
                width: 100%;
                height: 100%;
            }

            .wrapper .scroll {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 30px;
                background-color: aqua;
                border-left: 1px solid #000;
                border-right: 1px solid #000 ;
            }
            

            .wrapper .scroll .scrollIn {
                position: absolute;
                width: 30px;
                height: 100px;
                background-color: hotpink;
            }
        </style>
    </head>
    <body>
       <div class="wrapper">
            <div class="content"></div>


            <!-- 滑槽 -->
            <div class="scroll">
                <!-- 滑块 -->
                <div class="scrollIn"></div>
            </div>
       </div>


       <script>
            var scrollIn = document.querySelector('.wrapper .scroll .scrollIn');
            // 内容
            var content = document.querySelector('.wrapper .content');

            for(var i = 1; i <= 200; i++){
                content.innerHTML += '马志强' + i + '<br>';
            }


            // 滚动条
            scrollIn.onmousedown = function(event){
                var eleY = scrollIn.offsetTop;

                var startY = event.clientY;

                document.onmousemove = function(event){
                    var endY = event.clientY;

                    var disY = endY - startY;

                    var lastY = disY + eleY;

                    if(lastY >= document.documentElement.clientHeight - scrollIn.offsetHeight){
                        lastY = document.documentElement.clientHeight - scrollIn.offsetHeight
                    }else if(lastY <= 0){
                        lastY = 0;
                    }

                    scrollIn.style.top = lastY + 'px';
                }

                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }

            }
       </script>
    </body>
</html>